import React from 'react';
import { useNavigate } from 'react-router-dom';
import '../../styles/modules/error.scss';

const ErrorCatch = () => {
  const navigate = useNavigate();
  
  const handleBack = () => {
    navigate(-1);
  };
  
  return (
    <>
      {/* 背景部分 */}
      <div
        className="js-warp-hide bg-gray-dark-mktg d-flex flex-auto flex-column overflow-hidden position-relative"
        style={{ width: '100vw', height: '100vh' }}
      >
        <div className="sky-space">
          <div className="sky-stars"></div>
          <div className="sky-stars"></div>
          <div className="sky-stars"></div>
          <div className="sky-stars"></div>
          <div className="sky-stars"></div>
          <div className="sky-stars"></div>
        </div>
        <div className="sky-space-bg">
          <div className="sky-bg-stars"></div>
          <div className="sky-bg-stars"></div>
          <div className="sky-bg-stars"></div>
          <div className="sky-bg-stars"></div>
        </div>
      </div>
      <div className="figure">
        <div className="mj">
          <div className="head">
            <div className="nose"></div>
            <div className="hair">
              <div className="ponytail"></div>
              <div className="frontpony"></div>
            </div>
          </div>
          <div className="body">
            <div className="jacket">
              <div className="hand"></div>
            </div>
          </div>
          <div className="leg">
            <div className="foot"></div>
          </div>
          <div className="leg lft">
            <div className="foot"></div>
          </div>
        </div>
        <div className="error-no">
          <span>4</span>
          <div className="moon"></div>
          <span>4</span>
        </div>
        <div className="d-flex justify-center mt-12">
          <span 
            className="px-6 py-4 text-textColorLightest fs-24 pointer" 
            onClick={handleBack}
          >
            返回
          </span>
        </div>
      </div>
    </>
  );
};

export default ErrorCatch;